<template>
  <div>
    <a-card size="small">
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'BtnReprint'" @click="reprint">{{ $t('menu.reprint') }}</a-button>
            <a-button type="primary" v-has="'BtnClear'" @click="clearAll" >{{ $t('btn.cleanAll') }}</a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-row class="yy-Row">
        <a-form-model :model="reprintInfo" layout="inline"  :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>

            <a-col :span="5">
              <a-form-model-item :label="$t('btn.lotId')" style="width: 100%;">
                <a-input v-model="reprintInfo.lotId"  @keyup.enter.native="queryLotId"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.startTime')" >
                <a-date-picker
                    v-model="reprintInfo.startValue"
                    valueFormat="YYYY-MM-DD"
                    :disabled-date="disabledStartTime"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="5">
              <a-form-model-item :label="$t('menuItem.endTime')" >
                <a-date-picker
                    v-model="reprintInfo.endValue"
                    valueFormat="YYYY-MM-DD"
                    :disabled-date="disabledEndTime"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="5">
              <a-form-model-item :label="$t('btn.reprintCount')" style="width: 100%;">
                <a-input disabled v-model="reprintInfo.reprintCount" allow-clear/>
              </a-form-model-item>
            </a-col>

          </a-row>

        </a-form-model>
      </a-row>

      <a-row class="yy-Row">
        <m-table
            :row-selection="rowSelection"
            :columns="columns"
            :dataSource="dataSource"
            bordered
            :pagination=dataPagination
            :selection="true"
        >
        </m-table>
      </a-row>


    </a-card>

    <a-modal
        centered
        width="50%"
        :visible="reprintVisible"
        :title="$t('menuItem.printerInformation')"
        :okText="$t('menuItem.confirm')"
        :cancelText="$t('menuItem.cancel')"
        @ok="bindingHandleOk"
        @cancel="bindingHandleCancel"
    >

      <a-form-model
          :model="printerInfo"
          :labelCol="{span: 6}"
          :wrapperCol="{span: 13}"
          layout="inline"
          ref="printerInfo"
          :rules="rules"
      >
        <a-form-model-item :label="$t('menuItem.printerTime')" >
          <a-radio-group v-model="printerInfo.radioValue" @change="changeIsDateFlg">
            <a-radio value="N" >{{$t('nowDate')}}</a-radio>
            <a-radio value="Y" >{{$t('firstPrintingTime')}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="$t('menuItem.printTemplate')" >
          <a-radio-group v-model="printerInfo.radioTemplate">
            <a-radio value="1" >{{$t('nowTemplate')}}</a-radio>
            <a-radio value="2" >{{$t('firstPrintTemplate')}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :label="$t('menuItem.printerInformation')" prop="info">
          <a-select style="width: 100%" showSearch  v-model="printerInfo.info" allow-clear>
            <a-select-option  v-for="row in paramData"
                             :value="row.dataDesc + ':' + row.ext1"  :key="row.dataSeqId">
              {{ row.dataDesc + ':' + row.ext1 }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import MTable from "../../components/MTable";
import moment from "moment";
export default {
  name: "Reprint",
  components: {MTable},
  data(){
    return {
      rules: {
        info: [{required: true, message: this.$i18n.tc('reprintInfo')}],
      },
      columns: [
        {
          title: this.$t('menuItem.UserTableId'),
          dataIndex: "key",
          key: "key",
          width: 80,
          align: 'center',

          customRender: (text,record,index) => `${record.isEmpty  ?'': index+1}`,//此处为重点
        },
        {
          title: this.$t('btn.lotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'lotId'},
        },
        {
          title: this.$t('menuItem.Quantity'),
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center'
        },
        {
          title: this.$t('menuItem.CarrierId'),
          dataIndex: 'crrId',
          key: 'crrId',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Pri'),
          dataIndex: 'priInt',
          key: 'priInt',
          align: 'center',
        },
        // {
        //   title: this.$t('menuItem.StepStatus'),
        //   dataIndex: 'stepStatus',
        //   key: 'stepStatus',
        //   align: 'center',
        // },
        {
          title: this.$t('menuItem.ProductId'),
          dataIndex: 'productName',
          key: 'productName',
          align: 'center',
        },
        {
          title: this.$t('menuItem.templateName'),
          dataIndex: 'templateName',
          key: 'templateName',
          align: 'center',
        },
        {
          title: this.$t('user'),
          dataIndex: 'customerCode',
          key: 'customerCode',
          align: 'center',
        },
        {
          title: this.$t('menuItem.evtUsr'),
          dataIndex: 'evtUsr',
          key: 'evtUsr',
          align: 'center',
        },
        {
          title: this.$t('menuItem.evtTimestamp'),
          dataIndex: 'evtTimestamp',
          key: 'evtTimestamp',
          align: 'center',
        },
      ],
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 16
      },
    };
  },
  computed: {
    ...mapState('reprint', ['dataPagination','dataSource','reprintInfo','reprintVisible','printerInfo','paramData','rowSelection']),
  },
  methods: {
    ...mapMutations('reprint', ['setDataPagination','changeIsDateFlg','queryLotId','clearAll','reprint','bindingHandleOk','bindingHandleCancel','queryType','retPrintInfo']),
    setTableHeight(){
      let pageSize = parseInt((document.documentElement.clientHeight - 300) / 41)
      this.setDataPagination({
        ...this.dataPagination,
        pageSize: pageSize,
      })
    },
    disabledStartTime(time){
      if (this.reprintInfo.endValue === null){
        return false
      }
      return  time > moment(this.reprintInfo.endValue)
    },
    disabledEndTime(time){
      if (this.reprintInfo.startValue === null){
        return false
      }
      return  time < moment(this.reprintInfo.startValue)
    },
  },
  watch:{
    windowHeight(val){
      this.setTableHeight()
    }
  },
  beforeMount() {
    this.setTableHeight()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    this.queryType();
  }

}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>
